<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <title>播放</title>



    <!--<link href="__CSS__/bootstrap.min.css?v=3.3.6" rel="stylesheet">-->
    <!--<link href="__CSS__/font-awesome.css?v=4.4.0" rel="stylesheet">-->
    <!--<link href="__CSS__/animate.css" rel="stylesheet">-->
    <!--<link href="__CSS__/style.css?v=4.1.0" rel="stylesheet">-->
    <!--<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>-->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="__PUBLIC__/pull-master/examples/examples.css">


    <link href="__CSS__/home/video-js.css" rel="stylesheet">
    <link rel="stylesheet" href="__CSS__/home/muke_video.css">
    <link rel="stylesheet" href="__CSS__/button.css">
    <link rel="stylesheet" href="__PUBLIC__/4.2.0/css/font-awesome.css">
    <link rel="stylesheet" href="__PUBLIC__/4.2.0/css/font-awesome-ie7.min.css">

    <!--以上是全局js css-->
    <link rel="stylesheet" href="__PUBLIC__/pull-master/examples/examples.css">
    <link rel="stylesheet" href="__CSS__/home/book.css">
    <!--<script src="__JS__/videojs-ie8.min.js"></script>-->
    <style>
        .bb_pull-down{background:#efefef url() center bottom no-repeat;}
        .loadRefresh-over-box{width:100%;}
        .loadRefresh-over-box .slogan{width:100%}
        .loadRefresh-over-box p.refresh_slogan{width:100%;height:21px;margin:0;background:url() center 0 no-repeat;text-indent:-999em;overflow:hidden;-webkit-background-size:177px auto;background-size:177px auto}
        .loadRefresh-over-box .i-loading{width:13px;height:14px;margin-right:5px;display:inline-block;vertical-align:middle;background:url() no-repeat 0 0;background-size:155%}
        .loadRefresh-ing-box{height:61px;padding:20px 0 19px 0;background:#efefef}
        .i-loading2{-webkit-animation:loading 1s linear 0s infinite;animation:loading 1s linear 0s infinite}
        @-webkit-keyframes loading{0%{-webkit-transform:rotate(0)}
            100%{-webkit-transform:rotate(360deg)}
        }
        @keyframes loading{0%{transform:rotate(0)}
            100%{transform:rotate(360deg)}
        }
        .loadRefresh-over-box .i-loadingSucc,.loadText-box .i-loadingSucc{display:inline-block;width:13px;height:8px;margin-right:6px;border:2px solid #13b418;border-width:0 0 2px 2px;-webkit-transform:translate(0,-5px) rotate(-45deg);-ms-transform:translate(0,-5px) rotate(-45deg);-o-transform:translate(0,-5px) rotate(-45deg);transform:translate(0,-5px) rotate(-45deg)}
        .loadRefresh-over-box .i-loadingFailed{position:relative;margin-right:10px}
        .loadRefresh-over-box .i-loadingFailed::after,.loadRefresh-over-box .i-loadingFailed::before{position:absolute;top:50%;left:50%;content:"";background:#ee693b;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
        .loadRefresh-over-box .i-loadingFailed::before{width:2px;height:14px;margin-left:-1px;margin-top:-7px}
        .loadRefresh-over-box .i-loadingFailed::after{width:14px;height:2px;margin-top:-1px;margin-left:-7px}
        .loadText-box{position:relative;display:none;width:100%;height:35px;line-height:35px;text-align:center}
        .loadText-box p{font-size:12px;color:#666}
        .loadText-box .i-loading{width:12px;height:13px;margin-right:5px;display:inline-block;background:url() 0 0 no-repeat;background-size:19px auto;vertical-align:middle;-webkit-animation:loading 1s linear 0s infinite;animation:loading 1s linear 0s infinite}
        .loadText-box .i-loadingFailed{position:relative;margin-right:10px}
        .loadText-box .i-loadingFailed::after,.loadText-box .i-loadingFailed::before{position:absolute;top:50%;left:50%;content:"";background:#ee693b;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
        .loadText-box .i-loadingFailed::before{width:2px;height:14px;margin-left:-1px;margin-top:-7px}
        .loadText-box .i-loadingFailed::after{width:14px;height:2px;margin-top:-1px;margin-left:-7px}
        @-webkit-keyframes loading{0%{-webkit-transform:rotate(0)}
            100%{-webkit-transform:rotate(360deg)}
        }
        @keyframes loading{0%{transform:rotate(0)}
            100%{transform:rotate(360deg)}
        }
    </style>
</head>
<body>


    <!-- <div style=" padding: 10px; color: #eee; background: gray; text-align:center;">假如有广告~~~1~~~</div>
<div style=" padding: 10px; color: #eee; background: blue; text-align:center;">假如有广告~~~2~~~</div>
-->

        <div class="container" style="background-color: black">
            <div class="row">
                <div class="col-xs-12">
                    <button style="border: 0px #b7b6b9 solid;color: #b7b6b9;"  onclick="javascript:history.go(-1)" class="button button-large button-plain button-border  button-circle"><i class="fa fa-reply"></i></button>
                    <a href="{:url('Index/index')}"  style="font-size: 1rem;color:white;">
                        <span class="glyphicon glyphicon-tint"></span>在线学习
                    </a>
                </div>
            </div>
        </div>

        <!--头部结束-->
        <div class="container"  id="name" >
            <div class="row" >
                <div class="col-xs-12">
                    <small>{$course.category}/ <b>  {$course.record_name}</b></small>
                </div>
            </div>
            <div class="row" style="padding: 1rem">
                        <div class="col-xs-4   text-center AuxiliaryNavigation"  >
                            <p>   <small>课程难度</small></p>
                            <small><strong>{$course.difficulty}</strong></small>
                        </div>
                        <div class="col-xs-4   text-center AuxiliaryNavigation"  >
                            <p>   <small>章节总数数</small></p>
                            <small><strong>{$foreach.count}</strong></small>
                        </div>
                        <div class="col-xs-4   text-center AuxiliaryNavigation"  >
                            <p>   <small>课程节数</small></p>
                            <small><strong>{$foreach.counts}</strong></small>
                        </div>
            </div>
        </div>
        <!--video 开始-->

        <div class="container">
            <video onclick="playPause()"  id="my-video" autoplay="autoplay" class="video-js col-md-12 col-xs-12" controls preload="auto"
                   poster="" data-setup="{}">
                <source   id="video" src="{$videofile}" type="video/mp4">

                <p class="vjs-no-js">
                    To view this video please enable JavaScript, and consider upgrading to a web browser that
                    <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                </p>
            </video>
        </div>

        <!--video 结束-->
        <div class="container">

            <div class="row">
                <div class="col-sm-12  col-xs-12 center-block" >
                    <div class="text-center">
                        <small class="ShallowBlack">简介：{$course.introduce}</small>
                    </div>
                </div>

            </div>
        </div>

        <div class="container">
            <div class="row">
                {volist  name="chapter" id="value"}
                <!--循环部分 开始-->
                <div class="col-md-12  col-xs-12 row ">
                    <!--按键部分-->
                    <div class=" width-all btn btn-default dropdown-toggle notradius "  onclick="show('logo{$value.id}','show{$value.id}')">
                        <button class=" btn btn-xs pull-right"  >
                            <span id="logo{$value.id}" class="glyphicon glyphicon-eye-close"></span>
                        </button>
                        <span class="glyphicon glyphicon-list pull-left "></span>   第{$value.chapter_number}章节 {$value.chapter_name}
                    </div>
                    <!--课程部分-->

                    <div class="width-all text-center"  style="display: none;" id="show{$value.id}">

                        {volist name="value.file"  id="files"}
                        <div class=" list-none text-left center-block" style="width: 80%;color: #000;line-height: 3rem" >

                            <a href="{:url('Chapter/chaptershow')}?id={$course.id}&videofileid={$files.id}" > <div  class="fora"><span class="glyphicon glyphicon-play"></span>  {$files.name}
                                <button class="btn btn-xs pull-right">开始学习</button></div></a>
                        </div>
                        {/volist}

                    </div>
                </div>
                <!--循环部分结束-->

                {/volist}


            </div>
        </div>

    <!-- <div style=" padding: 10px; color: #eee; background: gray; text-align:center;">假如有广告~~~1~~~</div>
<div style=" padding: 10px; color: #eee; background: blue; text-align:center;">假如有广告~~~2~~~</div>
-->


   <!--组件依赖 Zepto 或 jQuery-->
<script src="__JS__/jquery-3.2.1.min.js"></script>
<script src="__PUBLIC__/pull-master/dist/pull.min.js"></script>
<script>

//    var $listWrapper = $('#listWrapper');
//
//    var pullInstance = new Pull($listWrapper, {
//        distance: 60,
//        onPullDown: function () {
//            setTimeout(function () {
//                Math.round(Math.random() + 0.2) ? handlePullDownSuccess() : handlePullDownFailed();
//            }, 1000);
//        },
//
//        // 自定义下拉刷新dom，支持与默认模板混用，如果只配置某一项，其余则使用默认模板
//        pullDownDom: {
//            start: '<div class="loadRefresh-over-box"><div class="slogan"><p class="refresh_slogan"></p><p><i class="i-loading"></i><span>下拉可刷新</span></p></div></div>', // 下拉刷新前的html
//            drop: '<div class="loadRefresh-over-box"><div class="slogan"><p class="refresh_slogan"></p><p><i class="i-loading"></i><span>释放可刷新</span></p></div></div>', // 下拉刷新触发提示的html
//            loading: '<div class="loadRefresh-over-box"><div class="slogan"><p class="refresh_slogan"></p><p><i class="i-loading i-loading2"></i><span>刷新中...</span></p></div></div>', // 下拉刷新中的html
//            success: '<div class="loadRefresh-over-box"><div class="slogan"><p class="refresh_slogan"></p><p><i class="i-loadingSucc"></i><span>刷新成功</span></p></div></div>', // 下拉刷新成功的html
//            failed: '<div class="loadRefresh-over-box"><div class="slogan"><p class="refresh_slogan"></p><p><i class="i-loadingFailed"></i><span>未加载成功，稍后再试吧</span></p></div></div>', // 下拉刷新失败的html
//        },
//
//        onPullUp: function () {
//            setTimeout(function () {
//                Math.round(Math.random() + 0.2) ? handlePullUpSuccess() : handlePullUpFailed();
//
//            }, 2000);
//        },
//
//
//    });
//
//    var pullDownTotal = 0,
//        pullUpTotal = 0;
//
//    // 创建li dom
//    function createList(str) {
//        return '<li class="list-group-item">'+ str +'</li>';
//    }
//
//    // 处理下拉刷新成功
//    function handlePullDownSuccess() {
//
//        var count = Math.round(Math.random()*10);
//        var htmlArr = [];
//
//        while(count){
//            count--;
//            htmlArr.unshift(createList('item pullDown ' + pullDownTotal));
//            pullDownTotal++;
//        }
//
//        $listWrapper.prepend($(htmlArr.join('')));
//
//        pullInstance.pullDownSuccess();
//    }
//
//    // 处理下拉刷新失败
//    function handlePullDownFailed() {
//        pullInstance.pullDownFailed();
//    }
//
//    // 处理上拉加载成功
//    function handlePullUpSuccess() {
//        var count = Math.round(Math.random()*10),
//            htmlArr = [];
//
//        while(count){
//            count--;
//            htmlArr.push(createList('item pullUp ' + pullUpTotal));
//            pullUpTotal++;
//        }
//
//        $listWrapper.append(htmlArr.join(''));
//
//        if(pullUpTotal >= 20){
//            pullInstance.pullUpDone();
//        }else{
//            pullInstance.pullUpSuccess();
//        }
//    }
//
//    // 处理上拉加载失败
//    function handlePullUpFailed() {
//        pullInstance.pullUpFailed();
//    }

    var videourl="{:url('Chapter/video')}"
    function video(fileid) {
//        alert(fileid
        $.ajax({
            url:videourl,
            type:"post",
            dataType:"json",
            data:{
                fileid:fileid
            },
            success:function (data) {
                alert(data.url);
                $("#video").attr("src","/thinkphp_5.0.9_full/public/20170719/31f9c6852cbc63d0f4102ac26f8bae01.MP4");
            },
            error:function(e){
                alert("视频播放出错 ".e.response)
            }
        })
    }
    function show(logoid,id) {
        if( $("#"+logoid).attr("class")=="glyphicon glyphicon-eye-close"){
            $("#"+logoid).attr("class","glyphicon glyphicon-eye-open")
        }else{
            $("#"+logoid).attr("class","glyphicon glyphicon-eye-close")
        }
//        alert(123)
        if( $("#"+id).css("display")=="block"){
            $("#"+id).css("display","none")
        }else{
//           alert($("#"+id));
            $("#"+id).css("display","block")
        }
    }

    var myVideo=document.getElementById("my-video");
    function playPause()
    {
        if (myVideo.paused)
            myVideo.play();
        else
            myVideo.pause();
    };

    $(function(){
        $(".div1").mouseover(function(){
            $(this).css("backgroundColor","white");
        });
        $('.div1').mouseout(function(){
            $(this).css("backgroundColor","rgba(183, 183, 183, 0.14)");
        })
    })

</script>
</body>
</html>







